<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      #real {
        /*点击弹出模态框的图片*/
        margin: 30px;
        width: 250px;
        border-radius: 6px;
      }

      #real:hover {
        opacity: 0.6;
      }

      #modal {
        display: none;
        /*隐藏*/
        width: 100%;
        height: 100%;
        position: fixed;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
        top: 0px;
        left: 0px;
        z-index: 1;
      }

      #moimg {
        display: block;
        margin: 25px auto;
        width: 60%;
        max-width: 750px;
      }

      #caption {
        text-align: center;
        margin: 15px auto;
        width: 60%;
        max-height: 750px;
        font-size: 20px;
        color: #ccc;
      }

      #moimg,
      #caption {
        -webkit-animation: first 1s;
        -o-animation: first 1s;
        animation: first 1s;
      }

      @keyframes first {
        from {
          transform: scale(0.1);
        }
        to {
          transform: scale(1);
        }
      }

      .close {
        font-size: 40px;
        font-weight: bold;
        position: absolute;
        top: 20px;
        right: 14%;
        color: #f1f1f1;
      }

      .close:hover,
      .close:focus {
        color: #bbb;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <img src="../static/images/backg.jpg" id="real" alt="model test picture" />

    <div class="motai" id="modal">
      <span class="close" id="close" onclick="closeModal()">×</span>
      <img class="motaiimg" id="moimg" />
      <div id="caption"></div>
    </div>

    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery.js"
    ></script>
    <script type="application/javascript">
      //利用js实现功能
      var real = document.getElementById("real");
      var modal = document.getElementById("modal");
      var moimg = document.getElementById("moimg");
      var caption = document.getElementById("caption");

      real.onclick = function () {
        modal.style.display = "block";
        moimg.src = this.src;
        caption.innerHTML = this.alt;
      };

      //点击x关闭模态框
      function closeModal() {
        console.log("关闭");
        modal.style.display = "none";
      }
    </script>
  </body>
</html>
